<!DOCTYPE html>
<html lang="en">

{include file='index/header'}

<body id="goods" class="flexv">
<form class="flexitemv scroll main" id="form" action="{:url('Indent/indent')}" onsubmit="false">
    <div class="flex center img"><img src="__ROOT__/public/uploads/{$res.p_photo}" alt=""></div>
    <div class="flexv centerh profile">
        <h2>{$res.p_name}</h2>
        <div class="flex bottom">
            <p>¥ {:round($res['p_price'],2)}</p>
            <span>包邮</span>
        </div>
    </div>
    {eq name='res.p_type' value='1'}
    <div class="spec">
        {notempty name='res.spec'}
        <div class="flex centerv item spec-btn">
            <p class="flexitemv">选择规格</p>
            <span class="spec-price" price="0"></span>
            <input type="hidden" name="i_spec" value="" data-rule="*" data-errmsg="请选择产品规格">
            <i class="iconfont icon-go"></i>
        </div>
        {/notempty}
        <div class="flex centerv item pack-btn">
            <p class="flexitemv">选择包装</p>
            <span class="pack-price" price="0"></span>
            <input type="hidden" name="i_packing" value="" data-rule="*" data-errmsg="请选择包装">
            <i class="iconfont icon-go"></i>
        </div>
    </div>
    {/eq}

    {notempty name='Think.session.userid'}<input type="hidden" name="i_uid" value="{$Think.session.userid}" />{/notempty}
    <input type="hidden" name="i_pid" value="{$res.id}" />
    <input type="hidden" name="i_type" value="{$res.p_type}" />
    <input type="hidden" name="i_price" id="i_price" value="{$res.p_price}" />
    {eq name='res.p_type' value='1'}
    <input type="hidden" name="i_postage" value="15" />
    {/eq}
    <input type="hidden" name="p_id" value="{$Think.get.pid}" />

    <div class="flexv centerv title">
        <p class="line"></p>
        <h2>商品详情</h2>
    </div>
    <div class="details">
        <p>注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到货物与商城图片、产地附件说明一致。</p>
    </div>
</form>
<div class="flex footer">
    <div class="flexv footer-minitem">
        <a href="/" class="flexitemv center">
            <i class="iconfont icon-index"></i>
            <p>主页</p>
        </a>
    </div>
    <div class="flexv footer-minitem">
        <a href="{:url('User/index')}" class="flexitemv center">
            <i class="iconfont icon-center"></i>
            <p>我的</p>
        </a>
    </div>
    <div class="flexv footer-minitem">
        <a href="tel:{:v('config.service_name')}" class="flexitemv center">
            <i class="iconfont icon-cservice"></i>
            <p>客服</p>
        </a>
    </div>
    <div class="flexitemv center footer-item">
        <p class="price" {eq name='res.p_type' value='2'}style="font-size:1.65rem;"{/eq}>¥ {:round($res['p_price'],2)}</p>
        {eq name='res.p_type' value='1'}
            <p class="postage" price="15.00">邮费：15.00</p>
        {/eq}
    </div>
    <div class="flexitemv sub">
        <a href="javascript:;" class="flexitem center sub">提交订单</a>
    </div>
</div>
<input type="hidden" id="userid" value="{$Think.session.userid}">
<input type="hidden" id="p_type" value="{$res.p_type}">
{js href="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"}
{js href="__ROOT__/template/index/plugins/mobile/layer.js"}
{js href="__ROOT__/public/static/js/checkform.js"}
{js href="__ROOT__/public/static/js/functions.js"}
{js href="__ROOT__/template/index/js/common.js"}
{js href="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"}
</body>
<script>
    new checkForm({
        form : '#form',
        btn : '.sub',
        error : function (e,msg){
            showMsg(msg,0,'#form');
        },
        complete : _.throttle(function (form){
            var user = document.querySelector('#userid').value;
            var type = document.querySelector('#p_type').value;
            if(user == '' && type==1)
            {
                layer.open({
                    title: [
                        '请填写购买手机号',
                        'background-color: #FF4351; color:#fff;'
                    ]
                    ,
                    content: '<input type="tel" placeholder="手机号" name="tel" class="telNum"><div class="flex center"><p class="sBtn" data="{$Think.get.pid}" data-url=' + '{:url("Indent/isUser")}' + '>确定</p></div>'
                    ,
                    success: function (el) {
                        var btn = el.querySelector('.sBtn');
                        btn.addEventListener('click', function () {
                            var val = el.querySelector('input').value;
                            var url = $(this).attr('data-url');
                            var pid = $(this).attr('data');
                            if (val !== '') {
                                $.get(url, {phone: val, pid: pid}, function (ret) {
                                    console.log(ret);
                                    if (ret.code == 1) {
                                        alert(1);
                                        var url = form.getAttribute('action');
                                        var datas = $(form).serializeArray();
                                        $.post(url, datas, function (ret) {
                                            showMsg(ret.msg, ret.code);
                                            if (ret.url) setTimeout(function () {
                                                window.location.href = ret.url;
                                            }, 1000);
                                        }, 'json');
                                    } else {
                                        showMsg(ret.msg);
                                        setTimeout(function () {
                                            window.location.href = ret.url;
                                        },1000);
                                    }
                                })
                            } else {
                                showMsg('手机号不能为空');
                            }
                        });
                    }
                });
            }else{
                var url = form.getAttribute('action');
                var datas = $(form).serializeArray();
                $.post(url, datas, function (ret) {
                    showMsg(ret.msg, ret.code);
                    if (ret.url) setTimeout(function () {
                        window.location.href = ret.url;
                    }, 1000);
                }, 'json');
            }
        }, 2000, { 'trailing': false })
    });
//    new checkForm({
//        form : '#form',
//        btn : '.sub',
//        error : function (e,msg){
//            showMsg(msg,0,'#form');
//        },
//        complete : function (form){
//            var url = form.getAttribute('action');
//            var datas = $(form).serializeArray();
//            if(typeof(editor) == 'object' && editor.html()) datas[datas.length - 1] = {name:'content',value:editor.html()};
//            $.post(url,datas,function(ret){
//                showMsg(ret.msg,ret.code);
//                if(ret.url) setTimeout(function (){window.location.href = ret.url;},1000);
//            },'json');
//        }
//    });

    //计算总价
    var packPrice = document.querySelector('.postage').getAttribute('price');
    console.log(packPrice);
    document.querySelector('.price').innerHTML = "¥ "+Number(packPrice).toFixed(2);

    var goodsObj = document.querySelector('#goods');
    var spec = document.querySelector('.spec-btn');
    if (spec) {
        //规格选择
        goodsObj.querySelector('.spec-btn').addEventListener('click', function () {
            var oSpan = this.querySelector('span');
            var oInput = this.querySelector('input');

            layer.open(({
                content: '<div class="sl">' +
                '{volist name="res.spec" id="v"}<a class="sl-item" value="{$v.id}" price="{$v.s_price}">{$v.s_name}</a>{/volist}' +
                '</div>'
                , skin: 'footer'
                , anim: 'up'
                , btn: ['取消']
                , success: function (el) {
                    el.addEventListener('click', function (e) {
                        var obj = e.target;
                        var postagePrice = Number(document.querySelector('.postage').getAttribute('price'));
                        var oPrice = document.querySelector('.price');
                        var iPrice = document.querySelector('#i_price');
                        var packPrice = document.querySelector('.pack-price').getAttribute('price');
                        if (obj.className == 'sl-item') {
                            oSpan.innerHTML = obj.innerText;
                            oSpan.setAttribute('price', obj.getAttribute('price'));
                            oInput.value = obj.getAttribute('value');
                            oPrice.innerText = '¥ ' + (postagePrice + Number(obj.getAttribute('price')) + Number(packPrice)).toFixed(2);
                            iPrice.value = (postagePrice + Number(obj.getAttribute('price')) + Number(packPrice));
                            layer.closeAll();
                        }
                    });
                }
            }));
        });
    }
    //规格选择结束
</script>
{include file='index/footer'}
</html>